<script setup>
/**
* 搜索栏
*/
import NoResult from './NoResult.vue';
import {ref,watch, nextTick,computed} from 'vue';
import {disableScroll,enableScroll} from '../utils/util.js'
const props = defineProps({
  theme:{
    type:String, // 默认主题 和 dark主题
    required: false,
  }
});
const inputRef = ref(null);
const searchVisible = ref(false);
const chooseTabIndex = ref(0);
const keyword = ref('');
const displayKeyword = ref('');
const chooseList = ref([
  {
    title: "沃尔核财",
    sn: "SF990090",
    breviary: "WEHC"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
  {
    title: "百邦科技",
    sn: "SF990089",
    breviary: "BBKJ"
  },
]);

const themeCls = computed(()=>{
  return props.theme === 'dark' ? 'dark' : ''
})

const resetData = ()=>{
  // displayKeyword.value=''
  keyword.value = '';
  chooseTabIndex.value = 0;
}
watch(searchVisible,async (nv)=>{
  if(nv){
    disableScroll()
    nextTick(()=>{
      resetData()
      inputRef.value.focus();
    })
  }else{
    enableScroll()
  }
},{
  immediate:false
})

const tabClick = (index) => {
  inputRef.value.focus();
  chooseTabIndex.value = index;
}
const itemClick = (item)=>{
  // console.log('item',item.breviary)
  searchVisible.value = false;
  displayKeyword.value = `${item.title} ${item.sn}`
}
</script>
<template>
  <div class="choose-container">
    <div class="choose" :class="themeCls" @click="searchVisible=true">
      <img v-if="theme" class="icon_search" src="../assets/images/icon_input_search@3x.png" width="54" height="54" alt="">
      <img v-else class="icon_search" src="../assets/images/icon_search_tjd@3x.png" width="54" height="54" alt="">
      <div class="keyword">
        {{displayKeyword ? displayKeyword :'输入证券代码/名称'}}
      </div>
    </div>
    <div class="slot">
      <slot></slot>
    </div>
  </div>

  <Teleport to="body">
    <div class="mask-container" v-if="searchVisible" @click="searchVisible=false">
      <div class="choose" @click.stop>
        <img class="icon_search" src="../assets/images/icon_input_search@3x.png" width="54" height="54" alt="">
        <input ref="inputRef" v-model="keyword" class="keyword-input" type="text" placeholder="搜索选择股票/ETF/可转债">
      </div>
      <div class="choose-md" @click.stop>
        <div class="choose-box">
          <div class="choose-tab"
               :class="{'active':chooseTabIndex===0}"
               @click="tabClick(0)"
          >
            <div class="tab">自选</div>
            <div class="maker"></div>
          </div>
          <div class="choose-tab"
               :class="{'active':chooseTabIndex===1}"
               @click="tabClick(1)"
          >
            <div class="tab">持仓</div>
            <div class="maker"></div>
          </div>
        </div>
        <div class="choose-list">
          <div v-if="chooseTabIndex===0"
               class="choose-list-item"
               v-for="item in chooseList"
               @click.stop="itemClick(item)"
          >
            <div class="item">
              <div class="item__tit">{{ item.title }}</div>
              <div class="item__sn">{{ item.sn }}</div>
            </div>
            <div class="breviary">
              {{ item.breviary }}
            </div>
          </div>
          <NoResult v-if="chooseTabIndex===1"/>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped lang="scss">
.mask-container {
  padding: 50px 16px 16px;
  z-index: 1000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);

  .choose-md {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 300px;
    border-radius: 8px;
    margin: 8px 0;
    overflow: hidden;
    .choose-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      flex:none;
      border-bottom: 1px solid #EBEBEB;

      .choose-tab {
        width: 50%;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        &.active {
          .maker {
            visibility: visible;
          }
        }

        .tab {
          height: 30px;
          line-height: 30px;
          mix-blend-mode: normal;
          color: rgb(108, 110, 122);
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
        }

        .maker {
          visibility: hidden;
          margin-top: 3px;
          width: 20px;
          height: 3px;
          border-radius: 3px;
          background: red;
        }
      }
    }
  }

  .choose-list {
    flex:1;
    overflow-y: auto;
    .choose-list-item {
      display: flex;
      border-bottom: 1px solid #EBEBEB;
      padding: 6px 0;

      .item {
        width: 50%;
        padding-left: 14px;

        .item__tit {
          color: #1D1D1D;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          line-height: 22px;
        }

        .item__sn {
          color: rgba(108, 110, 122, 1);
          font-family: DINPro-Medium;
          font-weight: 450;
          font-size: 13px;
          line-height: 17px;
        }
      }

      .breviary {
        width: 50%;
        display: flex;
        align-items: center;
        color: #1D1D1D;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
      }
    }
  }
}

/**
  common css
 */
.choose {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  &.dark{
      margin:0 auto;
      width: 343px;
      height: 32px;
      mix-blend-mode: normal;
      border-radius: 17px;
      background:#F5F6FA;
     .keyword{
         height: 20px;
         color: rgba(108, 110, 122, 1);
         font-family: PingFangSC-Regular;
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
     }
  }

  .icon_search {
    width: 18px;
    height: 18px;
  }

  .keyword {
    margin-left: 4px;
    height: 17px;
    color: rgba(165, 166, 173, 1);
    font-family: PingFangSC-Medium;
    font-weight: 450;
    font-size: 17px;
    line-height: 17px;
  }
  .keyword-input{
    margin-left: 4px;
    height: 17px;
    color: rgba(165, 166, 173, 1);
    font-size: 15px;
    line-height: 15px;
    width: 70%;
    font-weight: normal;
  }
}
</style>